<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-11-06 10:32:36
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-12-24 15:04:37
 * @FilePath: \sr_system_manager_ui\src\components\TableForm\ToolBar.vue
 * @Description: 表格组件工具栏
-->

<script setup lang="ts">
import { ref } from 'vue'
import type { TableColumnItem } from '@/types/component'

const props = defineProps({
  btnTitle: {
    type: String,
    default: '按钮'
  },
  /* 隐藏toolBar左边菜单 */
  hideLeftMenu: {
    type: Boolean,
    default: true,
  },
  /* 是否显示检索图标 */
  showSearchIcon: {
    type: Boolean,
    default: true,
  },
  /* 是否显示检索条件 */
  showSearch: {
    type: Boolean,
    default: true,
  },
  /* 显隐列信息 */
  columns: {
    type: Array as () => TableColumnItem[],
  },
  /* 显隐列类型（transfer穿梭框、checkbox复选框） */
  showColumnsType: {
    type: String,
    default: "checkbox",
  },
  /* 工具栏的高度 */
  height: {
    type: String,
    default: '64px'
  },
  /* 第一个按钮显隐 */
  hideRightFirstBtn: {
    type: Boolean,
    default: false,
  },
  /* 第二个按钮显隐 */
  hideRightSecondBtn: {
    type: Boolean,
    default: false,
  },
  /* 第三个按钮显隐 */
  hideRightThirdBtn: {
    type: Boolean,
    default: true,
  },
  /* 第四个按钮显隐 */
  hideRightForthBtn: {
    type: Boolean,
    default: false,
  },
  /* 第一个按钮权限 */
  rightFirstBtnPermission: {
    type: Array as () => String[],
    default: () => ['*:*:*']
  },
  /* 左侧菜单按钮权限 */
  leftMenuPermission: {
    type: Array as () => String[],
    default: () => ['*:*:*']
  }
})

const emits = defineEmits(['btnClick', 'download', 'refresh', 'search'])
// 显隐数据
const columnsValue = ref<TableColumnItem[]>([])
// 显隐列dialog的打开状态
const openColumnDialog = ref(false)
// 弹出层标题
const title = ref("显示/隐藏")

// 右侧列表元素变化
function dataChange(data) {
  for (let item in props.columns) {
    const key = props.columns[item].key;
    props.columns[item].visible = !data.includes(key);
  }
}

// 显示显隐列
const showColumn = () => {
  openColumnDialog.value = true
}

// 勾选
function checkboxChange(event, title) {
  if (props.columns) {
    props.columns.filter(item => item.title === title)[0].visible = event;
  }
}
</script>

<template>
  <div class="tool-bar" :style="{ height: props.height }">
    <div>
      <slot name="leftMenu"><el-button v-if="!props.hideLeftMenu" v-hasPermi="props.leftMenuPermission" type="primary" @click="$emit('btnClick')">{{ props.btnTitle }}</el-button></slot>
    </div>
    <div class="container-end">
      <div v-if="!props.hideRightFirstBtn" v-hasPermi="props.rightFirstBtnPermission" class="operate-item">
        <el-tooltip effect="dark" content="下载" placement="top">
          <el-button class="operate-icon" icon="Download" @click="$emit('download')" />
        </el-tooltip>
      </div>
      <div v-if="!props.hideRightSecondBtn" class="operate-item">
        <el-tooltip effect="dark" content="刷新" placement="top">
          <el-button class="operate-icon" icon="Refresh" @click="$emit('refresh')" />
        </el-tooltip>
      </div>
      <div v-if="props.columns && !props.hideRightThirdBtn" class="operate-item">
        <el-tooltip effect="dark" content="显隐列" placement="top">
          <el-button v-if="props.showColumnsType === 'transfer'" class="operate-icon" @click="showColumn()">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="design-iconfont" width="20" height="20">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M3 4.66667H1.66666V3.33334H3V4.66667ZM14.3333 4.66667H4.33333V3.33334H14.3333V4.66667ZM3 8.66667H1.66666V7.33334H3V8.66667ZM14.3333 8.66667H4.33333V7.33334H14.3333V8.66667ZM3 12.6667H1.66666V11.3333H3V12.6667ZM14.3333 12.6667H4.33333V11.3333H14.3333V12.6667Z" fill="#4E5969"></path>
            </svg>
          </el-button>
          <el-dropdown v-if="props.showColumnsType === 'checkbox'" trigger="hover" :hide-on-click="false">
            <el-button class="operate-icon">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="design-iconfont" width="20" height="20">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M3 4.66667H1.66666V3.33334H3V4.66667ZM14.3333 4.66667H4.33333V3.33334H14.3333V4.66667ZM3 8.66667H1.66666V7.33334H3V8.66667ZM14.3333 8.66667H4.33333V7.33334H14.3333V8.66667ZM3 12.6667H1.66666V11.3333H3V12.6667ZM14.3333 12.6667H4.33333V11.3333H14.3333V12.6667Z" fill="#4E5969"></path>
              </svg>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <template v-for="item in props.columns" :key="item.dataIndex">
                  <el-dropdown-item>
                    <el-checkbox :checked="item.visible" :label="item.title" :disabled="item.disabled" @change="checkboxChange($event, item.title)" />
                  </el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-tooltip>
      </div>
      <div v-if="props.showSearchIcon && !props.hideRightForthBtn" class="operate-item">
        <el-tooltip effect="dark" :content="props.showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
          <el-button class="operate-icon" icon="Search" @click="$emit('search')" />
        </el-tooltip>
      </div>
    </div>
    <el-dialog :title="title" v-model="openColumnDialog" append-to-body>
      <el-transfer
        :titles="['显示', '隐藏']"
        v-model="columnsValue"
        :data="props.columns"
        @change="dataChange"
      ></el-transfer>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
/* 表格工具栏 */
.tool-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
}
.container-end {
  display: flex;
  justify-content: flex-end;
  height: 30px;
  /* 按钮样式 */
  :deep(.el-button) {
    border: none;
    height: 30px;
    padding: 0px;
    border-radius: 0px;
  }
}
.operate-item {
  margin-left: 8px;
}
.operate-icon {
  width: 30px;
  height: 30px;
  font-size: 18px;
  color: #57A9FB;
}
/* 按钮样式 */
:deep(.el-button--large) {
  height: 32px;
}
</style>